<template>
  <div class="about-page">
    <h1>食谱推荐</h1>
    <div class="recipe-list">
      <div
        class="recipe-card"
        v-for="recipe in recipes"
        :key="recipe.recipe_id"
        @click="showDetail(recipe.recipe_id)"
      >
        <h3>{{ recipe.name }}</h3>
        <p class="description">{{ recipe.description }}</p>
        <div class="card-actions">
          <button class="detail-btn">查看详情</button>
        </div>
      </div>
    </div>

    <!-- 详情模态框 -->
    <shipudetail
      v-if="showDetailModal"
      :recipe-id="selectedRecipeId"
      @close="handleClose"
    ></shipudetail>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import Shipudetail from '../components/shipudetail.vue';

const recipes = ref([]);
const showDetailModal = ref(false);
const selectedRecipeId = ref(null);

const handleClose = () => {
  showDetailModal.value = false;
  selectedRecipeId.value = null;
};

const showDetail = (recipeId) => {
  selectedRecipeId.value = recipeId;
  showDetailModal.value = true;
};

onMounted(() => {
  // 调用食谱列表接口（注意路径和字段名）
  axios.get('http://localhost:8080/MDMS0214_war/recipe/all')
    .then(response => {
      // 直接使用接口返回的 recipe_id、name、description 字段
      recipes.value = response.data.map(recipe => ({
        recipe_id: recipe.recipe_id,
        name: recipe.name,
        description: recipe.description,
        url: recipe.url // 保留图片地址用于详情页
      }));
    })
    .catch(error => {
      console.error('获取食谱列表失败:', error);
      alert('加载食谱失败，请重试');
    });
});
</script>

<style scoped>
/* 页面整体样式 */
.about-page {
  font-family: 'PingFang SC', sans-serif;
  padding: 20px;
  background-color: #f0f2f5;
}

h1 {
  color: #1a73e8;
  text-align: center;
  margin-bottom: 30px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 食谱列表布局 - 关键修改部分 */
.recipe-list {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(clamp(280px, 32vw, 400px), 1fr));
  max-width: 1200px; /* 限制最大宽度，确保大屏幕下不会过宽 */
  margin: 0 auto; /* 水平居中 */
}

/* 单个食谱卡片样式 */
.recipe-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  padding: 24px;
  transition: all 0.3s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 80%; /* 确保卡片高度一致 */
}

.recipe-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

h3 {
  color: #333;
  margin-bottom: 12px;
  font-size: 1.25rem;
  line-height: 1.4;
}

.description {
  color: #666;
  line-height: 1.6;
  margin-bottom: 20px;
  flex-grow: 1; /* 让描述部分填充剩余空间 */
}

.card-actions {
  border-top: 1px solid #f0f0f0;
  padding-top: 16px;
  display: flex;
  justify-content: flex-end;
}

.detail-btn {
  background: #1a73e8;
  color: white;
  border: none;
  padding: 13px 25px;
  border-radius: 4px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-btn:hover {
  background: #1557b0;
}

/* 响应式调整 - 确保一排最多三列 */
@media (min-width: 1200px) {
  .recipe-list {
    grid-template-columns: repeat(3, 1fr); /* 大屏幕强制三列 */
  }
}
</style>